<template>
	<view class="tab-bar" v-if="tabbar.length">
		<view class="tab-bar-border"></view>
		<view v-for="(v, k) in tabbar" :key="k" class="tab-bar-item" @click.stop="switchTab(v.page)">
			<view :class="['iconfont ' + v.icon, tabbarIndex == k ? 'color-act' : 'color']">
				<view class="tab-bar-icon-badge" v-if="v.num && tabbarIndex != k">{{ v.num }}</view>
			</view>
			<view :class="tabbarIndex == k ? 'color-act' : 'color'">{{ v.text }}</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabbarIndex: 0,
			tabbar: [
				// {
				// 	page: 'pages/index/index',
				// 	icon: 'icondianpu1',
				// 	text: '首页',
				// 	num: 0
				// },
				{
					page: 'pages/brush/category',
					icon: 'iconfenlei1',
					text: '分类',
					num: 0
				},
				{
					page: 'pages/top/list',
					icon: 'iconliebiaoxingshi',
					text: '排行榜',
					num: 0
				},
				{
					page: 'pages/mine/mine',
					icon: 'iconwode',
					text: '我的',
					num: 0
				}
			]
		};
	},
	created() {
		let index = this.tabbar.findIndex(e => e.page == this.$tools.prePage());
		this.tabbarIndex = index == -1 ? 0 : index;
		let cartList = uni.getStorageSync('cartList')
		if(cartList){
			this.tabbar[2].num = cartList.length
		}
	},
	methods: {
		switchTab(page) {
			if (this.tabbar[this.tabbarIndex].page == page) return;
			uni.reLaunch({
				url: '/' + page
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.color-act {
	color: $themeColor;
}
.color {
	color: #bfbfbf;
}

.tab-bar-icon-badge {
	position: absolute;
	right: -20rpx;
	top: -20rpx;
	transform: scale(0.8) translateX(0px);
	border-radius: 20rpx;
	font-size: 22rpx;
	padding: 3rpx 8rpx;
	min-width: 20rpx;
	z-index: 88888;
	color: #fff;
	background: rgba($color: $themeColor, $alpha: 0.8);
}
.iconfont {
	position: relative;
	font-size: 45rpx;
}
.tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 94rpx;
	background: white;
	display: flex;
	padding-bottom: env(safe-area-inset-bottom);
	z-index: 99999;
}
.tab-bar-border {
	background-color: rgba(0, 0, 0, 0.2);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 1px;
	transform: scaleY(0.5);
}
.tab-bar-item {
	flex: 1;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	font-size: 22rpx;
	position: relative;
}
</style>
